<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>金融文本摘要生成系统</title>
    <style>
        .top {
            margin-left: 30%;
            margin-right: 30%;
            margin-top: 3%;
        }

        .middle {
            margin-left: 30%;
            margin-right: 30%;
            margin-bottom: 10%;
        }

        .bottom {
            margin-left: 30%;
            margin-right: 30%;
        }
        .bottom p{
            color: #999999;
        }

        .textLabel{
            /*background: #24b7e5;*/
            font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;
            font-size: 20px;
        }

        .radioStyle {
            display: inline-block;
        }

        .radioStyle input {
            visibility: hidden;
        }

        .radioStyle input[type="radio"] + label {
            position: relative;
            cursor: pointer;
        }

        .radioStyle input + label::before {
            content: '';
            position: absolute; /*父元素为label，针对父元素进行绝对定位*/
            left: -24px;
            width: 18px;
            height: 18px;
            border: 1px solid #999;
            border-radius: 50%; /*圆角边框*/
        }

        .radioStyle input:checked + label::before {
            box-shadow: 0 0 6px #24b7e5;
        }

        .radioStyle input:checked + label::after {
            content: '';
            position: absolute; /*针对label进行绝对定位*/
            left: -20px;
            top: 4px;
            border-radius: 50%; /*设置圆角*/
            width: 12px;
            height: 12px;
            background: #24b7e5;
        }

        .commandButton {
            display: inline-block;
            margin-right: 30px;
        }

        #submit_click {
            margin-top: 32px;
            height: 40px;
        }

        #submit_click input {
            text-decoration: none;
            background: #2f435e;
            color: #f2f2f2;

            padding: 10px 30px 10px 30px;
            font-size: 16px;
            font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;
            font-weight: bold;
            border-radius: 3px;

            -webkit-transition: all linear 0.30s;
            -moz-transition: all linear 0.30s;
            transition: all linear 0.30s;
        }

        #submit_click a:hover {
            background: #385f9e;
        }

        #clear_click {
            margin-top: 32px;
            height: 40px;
        }

        #clear_click input {
            text-decoration: none;
            background: #f60303;
            color: #f2f2f2;

            padding: 10px 30px 10px 30px;
            font-size: 16px;
            font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;
            font-weight: bold;
            border-radius: 3px;

            -webkit-transition: all linear 0.30s;
            -moz-transition: all linear 0.30s;
            transition: all linear 0.30s;
        }

        #clear_click a:hover {
            background: #385f9e;
        }
    </style>
    <script>
        function dataCheck() {
            const lenData = document.getElementById("textInput").value.length;
            if (lenData === 0) {
                window.alert('请在文本框中填入文本');
                return false;
            }
            return true;
        }

        function saveText() {
            if (dataCheck()) {
                const text = document.getElementById("textInput").value;
                var fso = new ActiveXObject(Scripting.FileSystemObject);
                var f = fso.createtextfile('testHTML.txt', 2, true);
                f.write(text);
                f.close();
                window.alert('OK');
            }
        }
    </script>
</head>
<body>
<div class="top">
    <h1>
        金融文本摘要生成系统
    </h1>
    <hr>
</div>
<div class="middle">
    <div class="textPanel">
        <p class="textLabel">
            原文本输入框
        </p>
        <p>
            <textarea id="textInput" rows="20" cols="100" placeholder="请输入文章内容(必填)"></textarea>
        </p>
    </div>
    <div class="textPanel">
        <p class="textLabel">
            自动摘要结果
        </p>
        <p>
            <textarea id="textOutput" rows="20" cols="100" placeholder="结果将在这里显示"></textarea>
        </p>
    </div>
    <div class="selectPanel">
        <p>
            选择您的偏好
        </p>
        <div class="radioStyle">
            <input type="radio" name="like" id="likeL" checked>
            <label for="likeL">交易</label>
        </div>
        <div class="radioStyle">
            <input type="radio" name="like" id="likeD">
            <label for="likeD">投资</label>
        </div>
        <div class="radioStyle">
            <input type="radio" name="like" id="likeH">
            <label for="likeH">股票</label>
        </div>
        <div class="radioStyle">
            <input type="radio" name="like" id="likeZ">
            <label for="likeZ">基本面</label>
        </div>
        <div class="radioStyle">
            <input type="radio" name="like" id="likeQ">
            <label for="likeQ">宏观经济</label>
        </div>
    </div>
    <div class="commandPanel">
        <div id="submit_click" class="commandButton">
            <input id="btsubmit" type="button" onclick="saveText()" value="提取摘要">
        </div>
        <div id="clear_click" class="commandButton" type="button">
            <input id="btclear" type="button" value="清空文本">
        </div>
    </div>
</div>
<div class="bottom">
    <hr>
    <p id="register">
        第十七届“挑战杯”参赛项目
    </p>
</div>
</body>
</html>